<!--
 * @Descripttion: 
 * @version: 
 * @Author: guangyunl
 * @Date: 2024-03-16 02:57:23
 * @LastEditors: guangyunl
 * @LastEditTime: 2024-03-27 21:43:08
-->
<!-- 活动管理已完成-->
<template>
  <div id="template">
    <page-main>
      <avue-crud
        :option="Main_Option"
        :data="Main_Data"
        :search.sync="Main_search"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @reset-change="resetChange"
        @row-save="rowSave"
        @row-update="rowUpdate"
        @row-del="rowDel"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="menu" slot-scope="{ row, size }">
          <el-button type="text" :size="size" @click="viewProducts(row)"
            >活动商品</el-button
          >
        </template>
      </avue-crud>
    </page-main>

    <!-- 活动商品管理页面 -->
    <el-drawer
      title="活动商品"
      :visible.sync="viewProductsDrawer"
      :destroy-on-close="true"
      size="80%"
    >
      <page-main>
        <avue-crud
          :option="Products_Option"
          :data="Products_Data"
          ref="product"
          @on-load="getProductsPageInfoFunc"
          :page.sync="Products_Page"
          :search.sync="Products_search"
          @search-change="searchProductsChange"
          @refresh-change="refreshProductsChange"
          @reset-change="resetProductsChange"
          @size-change="sizeProductsChange"
          @current-change="currentProductsChange"
          @row-del="removeProducts"
        >
          <div>活动商品</div>

          <!-- 商品图插槽 -->
          <template v-slot:defaultImg="{ row }">
            <el-image
              v-if="row.defaultImg"
              :src="row.defaultImg"
              style="width: 50px; height: 50px;"
            ></el-image>
            <span v-else>暂无商品图</span>
          </template>

          <template slot="menuLeft">
            <el-button size="small" type="success" @click="mountProducts"
              >添加商品</el-button
            >
          </template>
        </avue-crud>
      </page-main>
    </el-drawer>
    <!--  添加商品抽屉 -->
    <el-drawer
      title="选取商品"
      :visible.sync="selectVisible"
      direction="rtl"
      size="80%"
      :destroy-on-close="true"
      @close="selectClose"
    >
      <page-main title="可将以下商品挂载至活动">
        <avue-crud
          ref="selectCrud"
          :table-loading="SelectProducts_table_loading"
          :option="SelectProducts_Option"
          :data="SelectProducts_Data"
          :page.sync="SelectProducts_Page"
          :search.sync="SelectProducts_search"
          @refresh-change="obtainProductsFunc"
          @selection-change="selectionChange"
          @search-change="SelectProducts_searchChange"
          @reset-change="SelectProducts_resetChange"
          @current-change="SelectProducts_currentChange"
          @size-change="SelectProducts_sizeChange"
         
        >
          <template slot="menuLeft">
            <el-button
              size="small"
              type="success"
              @click="mountSelectedProducts"
              >挂载选中资源</el-button
            >
          </template>
          <!-- 商品图插槽 -->
          <template v-slot:defaultImg="{ row }">
            <el-image
              v-if="row.defaultImg"
              :src="row.defaultImg"
              style="width: 50px; height: 50px;"
            ></el-image>
            <span v-else>暂无商品图</span>
          </template>
        </avue-crud>
      </page-main>
    </el-drawer>
  </div>
</template>
  
<script>
import {
  Main_Option,
  Main_Data,
  Products_Data,
  Products_Option,
  SelectProducts_Option,
  SelectProducts_Data,
} from "./config";

import {
  deleteActivitysApi,
  updateActivitysApi,
  createActivitysApi,
  queryActivitysApi,
  queryActivitysProductsApi,
  selectActivitysProductsApi,
  removeActivitysProductsApi,
} from "@/api/activitysManage/index";

import { queryProductsInfoApi } from "@/api/productsManage/index";

export default {
  data() {
    return {
      //活动
      Main_Option,
      Main_Data,
      main_table_loading: false,
      Main_Form: {},
      Main_search: {},
      Main_Page: {
        currentPage: 1,
        pageSize: 10,
        total: 1,
      },
      //活动商品
      Products_Option,
      Products_Data,
      Products_table_loading: false,
      Products_search: {},
      Products_Page: {
        currentPage: 1,
        pageSize: 10,
        total: 1,
      },
      viewProductsDrawer: false,
      activityId: null,
      //活动折扣
      discount: null,

      //可添加商品
      SelectProducts_Option: SelectProducts_Option(),
      SelectProducts_Data,
      SelectProducts_table_loading: false,
      SelectProducts_search: {},
      selectVisible: false,
      SelectProducts_Page: {
        currentPage: 1,
        pageSize: 10,
        total: 1,
      },
      viewSelectProductsDrawer: false,
    };
  },
  mounted() {
    this.getHomePageInfoFunc();
  },
  methods: {
    // 搜索活动事件
    async searchChange(params, done) {
      this.Main_Page.currentPage = 1;
      this.Main_Page.pageSize = 10;
      await this.getHomePageInfoFunc();
      done();
    },
    currentChange(val) {
      this.Main_Page.currentPage = val;
      this.getHomePageInfoFunc();
    },

    sizeChange(val) {
      this.Main_Page.pageSize = val;
      this.getHomePageInfoFunc();
    },
    // 重置活动搜索
    resetChange() {
      this.Main_search = {};
    },
    // 刷新活动主页
    refreshChange() {
      this.Main_Page.currentPage = 1;
      this.getHomePageInfoFunc();
    },
    //新增活动
    rowSave(form, done, loading) {
      const { title, type, discount, sort } = form;

      this.createActivitysApiFunc(
        { title, type, discount, sort },
        done,
        loading
      );
    },
    //更新活动
    rowUpdate(row, index, done, loading) {
      const { id, title, type, discount, sort } = row;
      this.updateActivitysApiFunc(
        { id, title, type, discount, sort },
        done,
        loading
      );
    },
    //删除活动
    rowDel(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteActivitysApiFunc({ id: row?.id ?? "" });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },

    // 获取活动主页
    async getHomePageInfoFunc() {
      this.main_table_loading = true;
      const response = await queryActivitysApi({
        ...this.Main_search,
        currentPage: this?.Main_Page?.currentPage ?? 1,
        pageSize: this?.Main_Page?.pageSize ?? 10,
      }).catch(() => {});

      if (response?.code === 200) {
        this.Main_Data = response?.data?.records ?? [];
        this.Main_Page.total = response?.data?.total ?? 0;
      }
      this.main_table_loading = false;
    },
    // 新增活动
    async createActivitysApiFunc(data, done, loading) {
      const response = await createActivitysApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "新增成功" });
        this.Main_Page.currentPage = 1;
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },
    // 编辑活动
    async updateActivitysApiFunc(data, done, loading) {
      const response = await updateActivitysApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "编辑成功" });
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },
    // 删除活动
    async deleteActivitysApiFunc(data) {
      const loadding = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const response = await deleteActivitysApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "删除成功" });
        this.Main_Page.currentPage = 1;
        this.getHomePageInfoFunc();
      }
      loadding.close();
    },

    // 查看商品操作
    viewProducts(row) {
      console.log("活动商品管理 - row: ", row);
      this.viewProductsDrawer = true;
      this.activityId = row?.id ?? "";
      this.discount = row?.discount ?? "";
      this.getProductsPageInfoFunc();
    },

    // 搜索活动商品事件
    async searchProductsChange(params, done) {
      this.Products_Page.currentPage = 1;
      this.Products_Page.pageSize = 10;
      await this.getProductsPageInfoFunc();
      done();
    },
    currentProductsChange(val) {
      this.Products_Page.currentPage = val;
      this.getProductsPageInfoFunc();
    },

    sizeProductsChange(val) {
      this.Products_Page.pageSize = val;
      this.getProductsPageInfoFunc();
    },
    // 重置活动商品搜索
    resetProductsChange() {
      this.Products_search = {};
    },
    // 刷新活动商品主页
    refreshProductsChange() {
      this.Products_Page.currentPage = 1;
      this.getProductsPageInfoFunc();
    },

    // 获取活动商品主页
    async getProductsPageInfoFunc() {
      if (!this?.activityId) return;
      this.Products_table_loading = true;
      const response = await queryActivitysProductsApi({
        ...this.Products_search,
        aid: this?.activityId ?? "",
        currentPage: this?.Products_Page?.currentPage ?? 1,
        pageSize: this?.Products_Page?.pageSize ?? 10,
      }).catch(() => {});
      console.log(response, "<=========queryActivitysProductsApi");
      if (response?.code === 200) {
        this.Products_Data = response?.data?.records ?? [];
        this.Products_Page.total = response?.data?.total ?? 0;
        // this?.$refs?.product?.refreshTable();
      }
      this.Products_table_loading = false;
    },

    // 挂载资源
    mountProducts() {
      this.viewProductsDrawer = false;
      //   this.selectVisible = true;
      //   this.viewProductsDrawer=false,
      this.obtainProductsFunc();
    },
    // 关闭的回调
    drawerClose() {},
    async Products_searchChange(params, done) {
      this.Products_Page.currentPage = 1;
      this.Products_Page.pageSize = 10;
      //   await this.detailProductApiFunc();
      done();
    },

    // ---------------------------- 查看商品资源 - end
    // --------------------------------- 挂载资源

    // 获取商品资源数据
    obtainProductsFunc() {
      const that = this;
      return new Promise(async (resolve, reject) => {
        that.SelectProducts_table_loading = true;
        const response = await queryProductsInfoApi({
          ...that.SelectProducts_search,
          currentPage: that?.SelectProducts_Page?.currentPage ?? 1,
          pageSize: that?.SelectProducts_Page?.pageSize ?? 10,
        }).catch(() => {});
        that.$set(that, "selectVisible", true);
        console.log("response: ", response);
        if (response?.code === 200) {
          let list =
            that.Products_Data && that.Products_Data.map((item) => item.id);
          list = [...new Set(list)];
          that.SelectProducts_Option = SelectProducts_Option(list);
          that.SelectProducts_Data = response?.data?.records ?? [];
          //   that.$nextTick(() => {
          //     that.$refs.selectCrud.refreshTable();
          //   });
          that.SelectProducts_Page.total = response?.data?.total ?? 0;
        }
        that.SelectProducts_table_loading = false;
        resolve();
      });
    },

    mountSelectedProducts() {
      //创建商品id数组
      const list = this.checkedMap.map((item) => item.id);
      console.log("list: ", list);
      this.batchMountProductsApiFunc({
        id: this?.activityId,
        pids: list,
      });
    },
    // 关闭的回调
    selectClose() {
      this.checkedMap = [];
    },
    // 选中回调
    selectionChange(value) {
      this.checkedMap = value;
    },
    async SelectProducts_searchChange(params, done) {
      this.SelectProducts_Page.currentPage = 1;
      this.SelectProducts_Page.pageSize = 10;
      await this.obtainProductsFunc();
      done();
    },
    SelectProducts_resetChange() {
      this.SelectProducts_search = {};
    },
    SelectProducts_currentChange() {
      this.SelectProducts_Page.currentPage = val;
      this.obtainProductsFunc();
    },
    SelectProducts_sizeChange() {
      this.SelectProducts_Page.currentPage = val;
      this.obtainProductsFunc();
    },
    // ---------------------------------

    // 批量挂载商品资源
    async batchMountProductsApiFunc(data) {
      const loadding = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const response = await selectActivitysProductsApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$message.success("挂载成功");
        this.selectVisible = false;
        this.viewProductsDrawer = true;
      }
      loadding.close();
    },

    // 移除活动商品
    removeProducts(row) {
        console.log(row,"<==========row");
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeActivitysProductsApiFunc({ 
            id: this?.activityId ?? "" ,
            pid: row?.id ?? "",
        
        });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },

    // 移除活动商品
    async removeActivitysProductsApiFunc(data) {
      const loadding = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const response = await removeActivitysProductsApi(data).catch(() => {});
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "删除成功" });
        this.Products_Page.currentPage = 1;
        this.getProductsPageInfoFunc();
      }
      loadding.close();
    },
  },
};
</script>
  
<!-- <style lang="scss">

</style> -->

  